<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body>
      <div class="content">
        <div class="item">
          <div class="label dot">机构：</div>
          <div class="value">{{ data.tenantName }}</div>
        </div>
        <div class="item">
          <div class="label dot">模板名称：</div>
          <div class="value">{{ data.templateName }}</div>
        </div>
        <div class="item">
          <div class="label dot">推送渠道：</div>
          <div class="value">{{ data.pushChannelName }}</div>
        </div>
        <div class="item">
          <div class="label dot">标题：</div>
          <div class="value">{{ data.messageHeader }}</div>
        </div>
        <div class="item">
          <div class="label dot">内容：</div>
          <div class="value">{{ data.messageContent }}</div>
        </div>
        <div class="item">
          <div class="label dot">触发行为：</div>
          <div class="value">
            <div class="value-time">
              <dict-tag :options="dict.type.triggering_behavior" :value="data.triggeringBehavior"/>
              <div class="value-time-desc" v-if="data.triggeringBehavior==='2'">：{{ data.triggeringTime }}</div>
              <div class="value-time-desc" v-if="data.triggeringBehavior==='3'">：{{ data.triggeringTime }}</div>
              <div class="value-time-desc" v-if="data.triggeringBehavior==='4'">：{{ pushCondition(data.pushConditionCode) }}</div>
            </div>

          </div>
        </div>
        <div class="item">
          <div class="label dot">目标人群：</div>
          <div class="value">
            <div class="user-list">
              <div class="user">{{ userList }}</div>
              <el-popover
                placement="right"
                width="200"
                trigger="click" popper-class="user-list-popover">
                <div class="user-list-content">
                  <div class="user-item" v-for="(user, index) in data.ordinaryMessageUserList" :key="index">
                    <div class="user-item-index">{{ index+1 }}.</div>
                    <div class="user-item-name">{{ user.userName }}</div>
                  </div>
                </div>
                <div class="view-more" v-if="data.ordinaryMessageUserList && data.ordinaryMessageUserList.length > 0" slot="reference">查看更多</div>
              </el-popover>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="label dot">状态：</div>
          <div class="value">
            {{ ordinaryMessageStateMap[data.ordinaryMessageState] }}
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listPushConditionByDepartment} from "@/api/messageCenter/pushCondition";

export default {
  name: "detail",
  dicts: ['triggering_behavior'],
  props: {
    title: {
      type: String,
      default: "详情"
    },
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      // 状态字典映射
      ordinaryMessageStateMap: {
        "0": "启用",
        "1": "禁用",
      },
      pushConditionList: [],
    }
  },
  computed: {
    visible: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit("update:show", val)
      }
    },
    // 推送条件列表
    pushCondition: {
      get() {
        return (value) => {
          console.log('value',value)
          let obj = this.pushConditionList.find(item => item.value === value);
          return obj? obj.label : "";
        }
      },
      set(val) {}
    },
    userList() {
      return this.data.ordinaryMessageUserList ? this.data.ordinaryMessageUserList.map(user => user.userName).join(",") : "";
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.getPushConditionCode();
      }
    }
  },
  methods: {
    // 获取指定条件的推送条件编码
    getPushConditionCode() {
      if (this.data.tenantId && this.data.ordinaryMessageType) {
        let params = {
          tenantId: this.data.tenantId,
          messageType: this.data.ordinaryMessageType
        }
        listPushConditionByDepartment(params).then(response => {
          this.pushConditionList = response.data.map(item => {
            return {
              label: item.conditionName,
              value: item.pushConditionCode
            }
          });
        });
      }

    },
    cancel() {
      this.visible = false;
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  .item {
    display: flex;
    padding: 10px 0;

    .label {
      width: 100px;

      &.dot {
        &:before {
          content: "*";
          color: red;

        }
      }
    }

    .value {
      .value-time {
        display: flex;
        align-items: baseline;
      }

      .user-list {
        max-width: 400px;
        display: flex;
        align-items: center;

        .user {
          max-width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 10px;
        }
        .view-more {
          color: #409eff;
          cursor: pointer;
        }
      }
    }
  }
}

.dialog-footer {
  text-align: center;
}

.user-list-popover{
  .user-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .user-item-index {
      color: #909399;
      margin-right: 10px;
    }
    .user-item-name {
      color: #666;
    }
  }
}
</style>
